<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark">
    <title>Закрывающий тег</title>
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./styles/variables.css" />
    <link rel="stylesheet" href="./styles/globals.css" />
    <link rel="stylesheet" href="./styles/style.css" />
    <link rel="stylesheet" href="./styles/animations.css" />
    <link rel="stylesheet" href="./styles/themes.css" />
    <link rel="icon" href="./images/favicon.ico" sizes="any">
    <link rel="icon" href="./images/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="./images/favicon.png">
  </head>
  <body class="page">
    <header class="header block__size">
      <a class="header__logo">&lt;/html&gt;</a>
      <h1 class="header__title">закрывающий тег</h1>
      <nav class="theme-menu header__theme-menu">
        <!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
        <ul class="theme-menu__list">
          <li class="theme-menu__item">
            <button type="button" data-theme="dark" class="theme-menu__button">
              Темно
            </button>
          </li>
          <li class="theme-menu__item">
            <button
              type="button"
              data-theme="auto"
              disabled
              class="theme-menu__button"
            >
              Авто
            </button>
          </li>
          <li class="theme-menu__item">
            <button type="button" data-theme="light" class="theme-menu__button">
              Светло
            </button>
          </li>
        </ul>
      </nav>
    </header>
    <main>
      <ul class="cards-list">
        <li class="card block__size">
          <h2 class="card__title">Фритрек и нулевой спринт: Подготовка&nbsp;к&nbsp;работе</h2>
          <img class="card__image" src="./images/auto.png" alt="Автомобиль ночью">
          <div class="card__content">
            <p class="card_paragraph">
              Это было самое начало пути. На этом этапе важно было проникнуться основами и настроиться на учёбу. 
              И, возможно, подумать, как новые знания могут повлиять на ваше будущее.
            </p>
            <p class="card_paragraph">
              Место для ваших воспоминаний о начале обучения.
            </p>
            <div class="card__buttons"  aria-hidden="true">
              <button class="card__icon-button" type="button">
                <svg
                  class="like-icon" 
                  width="39" 
                  height="36" 
                  viewBox="0 0 39 36" 
                  xmlns="http://www.w3.org/2000/svg">
                  <g class="heart">
                    <path
                      class="contour"
                      fill="var(--contour-color)"
                      d="M12 6H9V9H12V6ZM15 6H12V9H15V6ZM9 9H6V12H9V9ZM9 12H6V15H9V12ZM9 15H6V18H9V15ZM18 
                      6H15V9H18V6ZM12 18H9V21H12V18ZM15 21H12V24H15V21ZM18 24H15V27H18V24ZM27 6H30V9H27V6ZM24 
                      6H27V9H24V6ZM30 9H33V12H30V9ZM30 12H33V15H30V12ZM30 15H33V18H30V15ZM21 6H24V9H21V6ZM27 
                      18H30V21H27V18ZM24 21H27V24H24V21ZM21 24H24V27H21V24ZM21 27H18V30H21V27ZM21 9H18V12H21V9Z"/>
                    <path
                      class="main-body"
                      fill="none"
                      d="M12 9H9V12H12V9ZM15 12H12V15H15V12ZM18 9H15V12H18V9ZM12 15H9V18H12V15ZM15 
                      15H12V18H15V15ZM15 18H12V21H15V18ZM18 12H15V15H18V12ZM18 21H15V24H18V21ZM18 18H15V21H18V18ZM27
                      9H30V12H27V9ZM24 9H27V12H24V9ZM27 12H30V15H27V12ZM24 12H27V15H24V12ZM21 9H24V12H21V9ZM27 
                      15H30V18H27V15ZM24 15H27V18H24V15ZM24 18H27V21H24V18ZM21 12H24V15H21V12ZM21 21H24V24H21V21ZM21
                      18H24V21H21V18ZM21 21H18V24H21V21ZM21 24H18V27H21V24Z"/>
                    <path
                      class="core"
                      fill="none" 
                      d="M18 15H15V18H18V15ZM21 15H24V18H21V15ZM21 15H18V18H21V15ZM21 12H18V15H21V12ZM21 
                      18H18V21H21V18Z"/>
                  </g>
                  <path
                  class="sparks"
                    fill="var(--filling-color)"
                    d="M36 13H39V16H36V13ZM27 27H30V30H27V27ZM18 33H21V36H18V33ZM9 27H12V30H9V27ZM24 
                    0H27V3H24V0ZM33 3H36V6H33V3ZM3 3H6V6H3V3ZM12 0H15V3H12V0ZM0 13H3V16H0V13Z"/>
                  </svg>
              </button>
              <button class="button card__like-button" type="button">
                <span class="button__text">Like</span>
              </button>
            </div>
          </div>
        </li>
      </ul>
      <section>
        <button class="button save-button" type="button">
          <svg class="floppy-icon" width="100%" height="100%" viewBox="0 0 21 21">
            <use href="./svg/floppy.svg#floppy"></use>
          </svg>
          <span class="button__text">Сохранить на память</span>
        </button>
      </section>
    </main>
    <script src="./scripts/set-theme.js"></script>
    <script src="./scripts/like.js"></script>
  </body>
</html>